<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript</title>
  <style>
    .header{
      width: 100px;
      height: 100px;
      background: red;
    }
  </style>
</head>

<body>
  <p class="header" id="title" style="color: yellow;">Document Object Model(DOM)——文档对象模型</p>
  <p class="name" name='input3'>姓名：p标签</p>
  <input type="text" placeholder="输入框1" name="input">
  <input type="text" placeholder="输入框2" name="input">
  <input type="text" placeholder="输入框3" name="input3">
  <script>
    {
      /* 
      1、通过Document对象调用
        - getElementById()
            通过id获取一个元素节点对象
        - getElementByTagName()
            通过标签名获取一组节点对象
        - getElementByName()
            通过name树形获取一组元素节点对象

      2、若通过某节点调用上述方法则在该节点后代中进行节点获取

      3、document.all代表页面所有的元素（有一个算一个）直接打印document.all会返回undefined，但是它却是实际存在的
      4、getComputdStyle()
          不支持IE8及以下
          该方法会返回一个对象，对象中发娘惹糕化妆了当前元素对应的样式
          如果获取的样式没有设置，则会获取到真实的值，而不是默认值
          比如没有设置width它不会获取auto而是返回一个长度
    */
      window.onload = function () {
        console.log(window)
        console.log(document.body)
        console.log(document.documentElement)
        console.log(document.getElementById('title'))
        console.log(document.getElementsByName('input3'))
        console.log(document.getElementsByTagName('input'))
        console.log(getComputedStyle(document.getElementById('title'),null).color)
      }
    }
  </script>
</body>

</html>